﻿@page "/listviews"
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<ListViews> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="" Name="Normal">
    <p>@Localizer["BasicUsageP1"]</p>
    <div class="listview-demo">
        <ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
            <FooterTemplate>
                <div class="text-end">
                    Coptyright Bootstrap Blazor
                </div>
            </FooterTemplate>
        </ListView>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["PaginationTitle"]" Introduction="@Localizer["PaginationIntro"]" Name="Pagination">
    <div class="listview-demo">
        <ListView TItem="Product" Pageable="true" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</DemoBlock>

<DemoBlock Title="" Introduction="" Name="Group">
    <div class="listview-demo">
        <ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>
